.fade-enter-active {
    animation: fade-in 1s;
}

.fade-leave-active {
    animation: fade-out 1s;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.fade-window-enter-active {
    /* animation: fade-window-in .1s; */
    opacity: 1;
}

.fade-window-leave-active {
    animation: fade-window-out .8s;
}

@keyframes fade-window-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-window-out {
    0% {
        opacity: 1;
    }
    30% {
        opacity: 0.8;
        left: 30%;
        right: 30%;
    }
    100% {
        opacity: 0;
        left: 100%;
        right: 100%;
        top: 100%;
    }
}


.fade-menu-enter-active {
    animation: fade-menu-in .2s;
}

.fade-menu-leave-active {
    animation: fade-menu-out .2s ;
}

@keyframes fade-menu-in {
    0% {
        width:0px;
        opacity: 0;
    }
    100% {
        width:200px;
        opacity: 1;
    }
}

@keyframes fade-menu-out {
    0% {
        width:200px;
        opacity: 1;
    }
    100% {
        width:0px;
        opacity: 0;
    }
}

.slide-filter-enter-active {
    animation: slide-filter-in 0.3s;
}

.slide-filter-leave-active {
    animation: slide-filter-out 0.3s;
}

@keyframes slide-filter-in {
    0% {
        transform: translate(1000px, 0);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes slide-filter-out {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    100% {
        transform: translate(-1000px, 0);
        opacity: 0;
    }
}

@keyframes jumpAnimation {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    0% {
        transform: translateY(0);
    }
}

@keyframes dockTitleAnimation {
    0% {
        opacity: 0;
        top: 0;
    }
    100% {
        opacity: 1;
        top: -66px;
    }
}

@keyframes loginErrorAnimation {
    0% {
        margin-left: -30px;
    }
    50% {
        margin-left: 30px;
    }
    100% {
        margin-left: 0;
    }
}

@keyframes userHeadHoverAnimation {
    0% {
        transform:rotate(0deg);
    }
    25% {
        transform:rotate(-45deg);
    }
    50% {
        transform:rotate(0deg);
    }
    75% {
        transform:rotate(45deg);
    }
    100% {
        transform:rotate(0deg);
    }
}


@keyframes message {
    0% {
        opacity: 0.1;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.1;
    }
}

.love {
    -webkit-animation: rotate 20s linear infinite;
    -moz-animation: rotate 20s linear infinite;
    -o-animation: rotate 20s linear infinite;
    animation: rotate 20s linear infinite;
}

.love_fast {
    -webkit-animation: rotate 5s linear infinite;
    -moz-animation: rotate 5s linear infinite;
    -o-animation: rotate 5s linear infinite;
    animation: rotate 5s linear infinite;
}
